import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { getContentDetail } from '@/api/article';
import {
  Message,
  Grid,
  Card,
  Image,
  Space,
  Button,
} from '@arco-design/web-react';
import styles from '@/pages/resources/style/articleDetails.module.less';
import { communityOptions, statusOptions } from '@/pages/resources/common';

const Row = Grid.Row;
const Col = Grid.Col;
function ArticleDetails() {
  const { state } = useLocation();

  const [detail, setDetail] = useState<any>(null);
  const [labels, setLabels] = useState('');
  const [community, setCommunity] = useState('');
  const [contentStatus, setContentStatus] = useState('');
  const getDetail = async () => {
    const res: any = await getContentDetail({ ID: state.ID });

    if (res.StatusCode === 200) {
      setDetail(res.Result);

      const labels = res.Result.Labels.map((item) => item.Name).join('、');
      setLabels(labels);

      const community = communityOptions.find(
        (opt) => opt.value === res.Result.CommunityDataKey
      )?.label;
      setCommunity(community);

      const contentStatus = statusOptions.find(
        (opt) => opt.value === res.Result.ContentStatus
      )?.label;
      setContentStatus(contentStatus);
    } else {
      Message.error('获取详情失败');
      window.location.hash = '/resources/article';
    }
  };

  useEffect(() => {
    if (!state) {
      window.location.hash = '/resources/article';
      return;
    }
    getDetail();
  }, []);
  return (
    <div>
      {detail && (
        <Card style={{ marginTop: '20px' }}>
          <div style={{ display: 'flex', justifyContent: 'end' }}>
            <Button
              onClick={() => (window.location.hash = '/resources/article')}
            >
              返回
            </Button>
          </div>

          <Row className="grid-demo" style={{ marginBottom: 16 }}>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>文章编码</div>
              <div className={styles.value}>{detail.ContentCode}</div>
            </Col>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>社区</div>
              <div className={styles.value}>{community}</div>
            </Col>
          </Row>
          <Row className="grid-demo" style={{ marginBottom: 16 }}>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>标题</div>
              <div className={styles.value}>{detail.Title}</div>
            </Col>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>类型</div>
              <div className={styles.value}>{detail.Category}</div>
            </Col>
          </Row>
          {labels && (
            <Row className="grid-demo" style={{ marginBottom: 16 }}>
              <Col span={24} className={styles.gridItem}>
                <div className={styles.label}>描述详情</div>
                <div className={styles.value}>{labels}</div>
              </Col>
            </Row>
          )}
          {detail.CreationPictures.length > 0 && (
            <Row className="grid-demo" style={{ marginBottom: 16 }}>
              <Col span={24} className={styles.gridItem}>
                <div className={styles.label}>图文详情</div>
                <div className={styles.value}>
                  <Space>
                    {detail.CreationPictures.map((item) => (
                      <Image width={100} src={item.Url} alt="" />
                    ))}
                  </Space>
                </div>
              </Col>
            </Row>
          )}

          <Row className="grid-demo" style={{ marginBottom: 16 }}>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>校园账号</div>
              <div className={styles.value}>{detail.UserName}</div>
            </Col>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>状态</div>
              <div className={styles.value}>{contentStatus}</div>
            </Col>
          </Row>
          <Row className="grid-demo" style={{ marginBottom: 16 }}>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>浏览量</div>
              <div className={styles.value}>{detail.VisitCount}</div>
            </Col>
            <Col span={12} className={styles.gridItem}>
              <div className={styles.label}>点赞量</div>
              <div className={styles.value}>{detail.LikeCount}</div>
            </Col>
          </Row>
        </Card>
      )}
    </div>
  );
}

export default ArticleDetails;
